---
layout: example
categories: example/v1.0.0
version: v1.0.0
title: Leaflet Markercluster
description: Using the Leaflet Markercluster plugin
tags:
  - cluster
---

<script src='{{site.tileApi}}/mapbox.js/plugins/leaflet-markercluster/v1.0.0/leaflet.markercluster.js'></script>
<link href='{{site.tileApi}}/mapbox.js/plugins/leaflet-markercluster/v1.0.0/MarkerCluster.css' rel='stylesheet' />
<link href='{{site.tileApi}}/mapbox.js/plugins/leaflet-markercluster/v1.0.0/MarkerCluster.Default.css' rel='stylesheet' />

<!-- Example data. -->
<script src="{{site.baseurl}}/assets/data/realworld.388.js"></script>

<div id='map'></div>

<script>
    var map = L.mapbox.map('map')
        .setView([-37.82, 175.215], 14)
        .addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'));

    var markers = new L.MarkerClusterGroup();

    for (var i = 0; i < addressPoints.length; i++) {
        var a = addressPoints[i];
        var title = a[2];
        var marker = L.marker(new L.LatLng(a[0], a[1]), {
            icon: L.mapbox.marker.icon({'marker-symbol': 'post', 'marker-color': '0044FF'}),
            title: title
        });
        marker.bindPopup(title);
        markers.addLayer(marker);
    }

    map.addLayer(markers);
</script>
